<template>
  <div style="margin-top: 30px; margin-bottom: 35px">
    <ul class="pagination justify-content-center">
      <button :class="[!(current === 1) ? 'page-pre phov' : 'page-pre disab']"
              v-on:click="pageTurn(false)" :disabled="current === 1">
        <span class="page-link" tabindex="-1">< 上一页 </span>
      </button>
      <li class="page-item"><a class="page-link" href="#">{{current}}/{{lastPage}}</a></li>
      <button :class="[!(current === lastPage) ? 'page-next nhov' : 'page-next disab']"
              v-on:click="pageTurn(true)" :disabled="current === lastPage">
        <span class="page-link">下一页 ></span>
      </button>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "pagination",
    props: ['current', 'pageSize', 'total'],
    data() {
      let {total, pageSize} = this.$props;
      return {
        lastPage: total % pageSize === 0 ? total / pageSize : parseInt(total / pageSize + 1),
      }
    },
    methods: {
      pageTurn: function (bh) {
        this.$emit("click", {bh});
      }
    }
  }
</script>

<style scoped>
  .bd-example .pagination {
    margin-top: .5rem;
    margin-bottom: .5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }

  .justify-content-center {
    justify-content: space-between !important;
  }

  .pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
  }

  .page-next {
    background-color: #ffffff;
    width: 105px;
    height: 65px;
    font-family: Ubuntu,"Source Sans Pro","Helvetica Neue",Helvetica,"Hiragino Sans GB","Hiragino Sans GB W3",Menlo,Monaco,Source Han Sans CN Regular,WenQuanYi Micro Hei,"Microsoft YaHei",Arial,sans-serif;
    font-size: 16px;
    line-height: 1.5rem;
    padding-right: 20px;
    line-height: 65px;
    text-align: right;
    border-style: none;
    border-radius: 8px;
    border-top-left-radius: 32px;
    border-bottom-left-radius: 32px
  }

  .nhov:hover {
    color: #5CC281;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1), 0 16px 32px 0 rgba(0, 0, 0, .1);
  }

  .page-pre {
    background-color: #ffffff;
    width: 105px;
    height: 65px;
    font-family: Ubuntu,"Source Sans Pro","Helvetica Neue",Helvetica,"Hiragino Sans GB","Hiragino Sans GB W3",Menlo,Monaco,Source Han Sans CN Regular,WenQuanYi Micro Hei,"Microsoft YaHei",Arial,sans-serif;
    font-size: 16px;
    line-height: 1.5rem;
    line-height: 65px;
    text-align: left;
    padding-left: 20px;
    border-style: none;
    border-radius: 8px;
    border-top-right-radius: 32px;
    border-bottom-right-radius: 32px;
  }

  .phov:hover {
    color: #5CC281;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 4px 8px 0 rgba(0, 0, 0, .1), 0 8px 16px 0 rgba(0, 0, 0, .1), 0 16px 32px 0 rgba(0, 0, 0, .1);
  }

  .page-item .page-link {
    line-height: 65px;
  }

  .disab {
    border-color: #d9d9d9;
    color: rgba(0,0,0,0.25);
    cursor: not-allowed;
  }

</style>
